<template>
  <div >
    <el-card class="box-card">
<!-- 组件的头部导航 -->
      <div slot="header" class="clearfix header">
        <span>专业管理 / </span>
        <i> 专业列表 </i>
        <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible = true">新增专业</el-button>
      </div>
      <div class="text item">     
          <el-table :data="SubjectsList" style="width: 100%">
<!-- 专业ID -->
      <el-table-column label="专业编号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index+1 }}</span>
        </template>
      </el-table-column>
<!-- 专业名称 -->
      <el-table-column label="专业名称" width="180">
        <template slot-scope="scope">
          <el-popover >         
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
<!-- 专业介绍 -->
      <el-table-column label="专业介绍" width="180">
        <template slot-scope="scope">
          <el-popover >          
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
<!-- 专业的操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
      <!-- 修改专业名称    -->
          <el-button size="mini"  @click="getSubjectsOne(scope.row)">修改</el-button>
              <el-dialog
              title="修改专业名称"
              :visible.sync="show"
              width="30%"
              :before-close="handleClose">
              <p>
                <input type="text" v-model="updateSubject.name">
                 <el-button type="primary" @click="handleEdit">确认修改</el-button>
              </p>
              <span slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>               
              </span>
            </el-dialog>

      <!-- 删除专业 -->
          <el-button size="mini" type="danger" @click="open( scope.row)" class="deleteBtn" >删除</el-button >

<!-- 新增专业 -->
           <!-- <el-button type="text" >新增专业</el-button> -->
            <el-dialog
              title="新增专业"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose">
              <p>
                <input type="text" placeholder="请输入要添加的专业名称" v-model="subject.name">
                 <el-button type="primary" @click="subjectAdd">点击新增</el-button>
              </p>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>               
              </span>
            </el-dialog>


        </template>
      </el-table-column>
    </el-table>
      </div>
    </el-card>
  </div> 
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('Subjects');



  export default {
    data() {
      return {
        //专业数据列表
        SubjectsList:[],
        //需要修改的专业数据（修改后的专业数据）
        subject:{
          name:'',
        },
        updateSubject:{
          name:'',
          _id:'',
        },
        //新增模态框的显示与隐藏
        dialogVisible: false,
        //修改模态框的显示与隐藏
        show:false,

      }
    },
    mounted(){
      this.getSubjectsList();
    },
    methods: {
      ...mapActions(['getSubjects','deleteSubjects','updateSubjects','addSubjects']),
      //----------------------获取专业列表----------------------
      async getSubjectsList(){
        const data = await this.getSubjects();
        if(data.code){
          this.SubjectsList = data.data.result
        }
      },
      //----------------------获取需要修改的专业信息------------
      getSubjectsOne(row){
        this.show = true;
        this.updateSubject = {...row}
      },
      //----------------------修改专业------------------------
      async handleEdit() {
        const data = await this.updateSubjects(this.updateSubject);
        if(data.code){
          this.$message({
              message: '修改成功！',
              type: 'success'
            });
            this.getSubjectsList();
            this.show = false;
        } else {
          this.$message({
              message: '网络错误，修改失败！',
              type: 'success'
            });
            this.show = false;
        }
        
      },
      //----------------------删除专业信息---------------------
      async handleDelete(row) {
        const data = await this.deleteSubjects(row._id);
        if(data.code){
          this.$message({
              message: '删除成功！',
              type: 'success'
            });
            this.getSubjectsList();
        } else {
          this.$message({
              message: '删除失败，该专业下还有班级数据，不能删除！',
              type: 'success'
            });
        }
      },
      //-------------------点击删除专业信息------------------------
      open(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //----------------------新增专业--------------------------
      async subjectAdd(){
        console.log(this.subject);
        const data = await this.addSubjects(this.subject);
        console.log(data);
        if(data.code){
          this.$message({
              message: '新增成功！',
              type: 'success'
            });
            this.dialogVisible = false;
            this.getSubjectsList();
        }
        
      },

      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
      
    }
  }
</script>

<style scoped>
.text {
  text-align: center;
}
.header {
  text-align: left;
   font-size:  14px;
}
.header span {
  color: #999;
  cursor: pointer;
}
.header i {
  font-weight: 600;
  cursor: pointer;
}
p {
  text-align: center;
}
input{
  width: 300px;
  height: 35px;
  outline-color: greenyellow;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin: 0 5px;
  text-indent: 5px;
}
.deleteBtn {
  margin: 0 10px;
  margin-left: 20px;
}
</style>